<template>
    <div class="component-time-picker" :class="[ innerClass ]">
        <div class="time-sort-box" @click="showTimePicker">
            <div class="time-sort">日期筛选</div>
            <div class="select">
                <span class="time-box">{{selectDate}}</span>
                <span class="icon">&#xe60b;</span>
            </div>
        </div>
        <div class="time-picker" :class="[ timePickerVisible ? 'picker-show' : '' ]">
            <div class="picker-header">
                <div @click="cancelTimeChoose">取消</div>
                <div @click="confirmTimeChoose">确定</div>
            </div>

            <!-- 用于触发monthes正常刷新 -->
            <span class="hidden-object">{{monthes}}</span>
            <wx-picker-view indicator-style="height: 40px;" style="width: 100%; height: 200px;" @change="onDateChange" class="picker-body">
                <wx-picker-view-column>
                    <div v-for="item in years" :key="'year' + item" class="picker-item">{{item}}</div>
                </wx-picker-view-column>
                <wx-picker-view-column>
                    <div v-for="item in monthes" :key="'month' + item" class="picker-item">{{item}}</div>
                </wx-picker-view-column>
                <wx-picker-view-column>
                    <div v-for="item in days" :key="'day' + item" class="picker-item">{{item}}</div>
                </wx-picker-view-column>
            </wx-picker-view>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';

@Component({
    name: 'TimePicker',
})
export default class TimePicker extends Vue {
    @Prop({
        type: String,
        required: true,
    })
    public value: any;

    @Prop({
        type: String,
        default: '',
    })
    public innerClass: any;

    public timePickerVisible: any = false;
    public selectDate: any = '全部';
    public tempSelectDate: any = '全部';
    public years: any = [];
    public monthes: any = [];
    public days: any = [];
    public a: any = 22;

    @Watch('value')
    public onValueChange(val: any) {
        this.selectDate = val;
    }

    @Watch('selectDate')
    public onSelectDateChange(val: any) {
        this.$emit('input', val);
    }

    public showTimePicker() {
        this.timePickerVisible = true;
    }

    public cancelTimeChoose() {
        this.timePickerVisible = false;
    }

    public confirmTimeChoose() {
        this.selectDate = this.tempSelectDate;
        this.cancelTimeChoose();
    }

    public resetTimePicker() {
        let nowYear = new Date().getFullYear();
        this.years = [];
        for (let i = 0; i < 10; i++) {
            this.years.push(nowYear--);
        }
        this.years.unshift('全部');
    }

    public onDateChange(e: any) {
        const val = e.detail.value;
        const years = this.years;
        if (years[val[0]] === '全部') {
            this.monthes = [];
            this.days = [];
            this.tempSelectDate = '全部';
            return;
        }
        this.monthes = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
        const monthes = this.monthes;
        const days = [];
        let isLeap = false;
        if (years[val[0]] % 4 === 0 && years[val[0]] % 100 !== 0) {
            isLeap = true;
        }
        if ([ 1, 3, 5, 7, 8, 10, 12 ].indexOf(monthes[val[1]]) !== -1) {
            for (let i = 1; i <= 31; i++) {
                days.push(i);
            }
        } else if ([ 4, 6, 9, 11 ].indexOf(monthes[val[1]]) !== -1) {
            for (let i = 1; i <= 30; i++) {
                days.push(i);
            }
        } else if (monthes[val[1]] === 2) {
            if (isLeap) {
                for (let i = 1; i <= 29; i++) {
                    days.push(i);
                }
            } else {
                for (let i = 1; i <= 28; i++) {
                    days.push(i);
                }
            }
        }
        this.days = days;
        this.tempSelectDate = `${years[val[0]]}-${monthes[val[1]]}-${days[val[2]]}`;
    }

    public created() {
        // console.log('selectDate', this.selectDate);
        this.resetTimePicker();
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";
.component-time-picker {
     .time-sort-box {
        display: flex;
        justify-content: flex-end;
        .time-sort {
            margin-right: 44px;
        }
        .select {
            .time-box {
                margin-right: 10rpx;
            }
            .icon {
                font-size: 14px;
                font-weight: bold;
                vertical-align: middle;
            }
        }
    }
    .time-picker {
        position: fixed;
        left: 0;
        right: 0;
        bottom: -245px;
        opacity: 0;
        z-index: 2;
        background-color: #fff;
        transition: all .4s ease-in-out;
    }

    .picker-show {
        opacity: 1;
        bottom: 0;
        transition: all .41s ease-in-out;
    }

    .picker-header {
        position: absolute;
        left: 0;
        right: 0;
        top: -45px;
        display: flex;
        background-color: #eee;
        height: 45px;
        line-height: 45px;
        text-align: center;
        color: #ff5a60;
        font-weight: bold;
    }

    .picker-header div {
        flex-grow: 1;
    }

    .picker-item {
        line-height: 40px;
        text-align: center;
    }
}

</style>
